<template>
  <div class="box">
    <el-breadcrumb separator=">">
      <el-breadcrumb-item to="/login" replace>首页</el-breadcrumb-item>
      <el-breadcrumb-item to="/login/user" replace>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>{{text}}</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="tableBox">
      <div class="tableTitle">{{text}}</div>
      <div class="table">
        <div class="title">用户信息</div>
        <div>
          <el-row>
            <el-col :span="6">用户名</el-col>
            <el-col :span="6">{{base_info.user_name||'无数据'}}</el-col>
            <el-col :span="6">邮箱</el-col>
            <el-col :span="6">{{base_info.email||'无数据'}}</el-col>
          </el-row>
          <el-row>
            <el-col :span="6">用户级别</el-col>
            <el-col :span="6">{{base_info.user_level||'无数据'}}</el-col>
            <el-col :span="6">昵称</el-col>
            <el-col :span="6">{{base_info.nick_name||'无数据'}}</el-col>
          </el-row>
          <el-row>
            <el-col :span="6">真实姓名</el-col>
            <el-col :span="6">{{base_info.name||'无数据'}}</el-col>
            <el-col :span="6">性别</el-col>
            <el-col :span="6">{{base_info.gender||'无数据'}}</el-col>
          </el-row>
          <el-row>
            <el-col :span="6">绑定手机号码</el-col>
            <el-col :span="6">{{base_info.mobile||'无数据'}}</el-col>
            <el-col :span="6">实名认证姓名</el-col>
            <el-col :span="6">{{base_info.real_name||'无数据'}}</el-col>
          </el-row>
          <el-row>
            <el-col :span="6">实名认证身份证</el-col>
            <el-col :span="6">{{base_info.identity_code||'无数据'}}</el-col>
            <el-col :span="6">会员成长值</el-col>
            <el-col :span="6">{{base_info.vip_count||'无数据'}}</el-col>
          </el-row>
        </div>
        <div class="title">账户信息</div>
        <div>
          <el-row>
            <el-col :span="3">账户余额</el-col>
            <el-col :span="3">{{account_info.account_balance||'无数据'}}</el-col>
            <el-col :span="3">金融账户余额</el-col>
            <el-col :span="3">{{account_info.financial_account_balance||'无数据'}}</el-col>
            <el-col :span="3">信用分数</el-col>
            <el-col :span="3">{{account_info.credit_point||'无数据'}}</el-col>
            <el-col :span="3">信用额度</el-col>
            <el-col :span="3">{{account_info.credit_quota||'无数据'}}</el-col>
          </el-row>
          <el-row>
            <el-col :span="3">消费额度</el-col>
            <el-col :span="3">{{account_info.consume_quota||'无数据'}}</el-col>
            <el-col :span="3">借呗额度</el-col>
            <el-col :span="3">{{account_info.jiebei_quota||'无数据'}}</el-col>
            <el-col :span="3">芝麻信用分</el-col>
            <el-col :span="3">{{account_info.zhima_point||'无数据'}}</el-col>
            <el-col :span="3"></el-col>
            <el-col :span="3"></el-col>
          </el-row>
        </div>
        <div class="title">收货地址</div>
        <el-table :data="receiver_list" max-height="700">
          <el-table-column prop="name" label="收货人" align="center"></el-table-column>
          <el-table-column prop="area" label="地区" align="center"></el-table-column>
          <el-table-column prop="address" label="地址" align="center"></el-table-column>
          <el-table-column prop="mobile" label="手机号码" align="center"></el-table-column>
          <el-table-column prop="telephone" label="固定电话" align="center"></el-table-column>
          <el-table-column prop="default" label="默认地址" align="center"></el-table-column>
          <el-table-column prop="zip_code" label="收货地址邮编" align="center"></el-table-column>
        </el-table>
        <div class="title">订单列表</div>
        <el-tabs type="border-card">
          <el-tab-pane v-for="item in order_list" :key="item.order_id" :label="item.order_id">
            <div>
              <el-row>
                <el-col :span="4">订单号</el-col>
                <el-col :span="4">{{item.order_id||'无数据'}}</el-col>
                <el-col :span="4">订单金额</el-col>
                <el-col :span="4">{{item.order_amount||'无数据'}}</el-col>
                <el-col :span="4">订单类型</el-col>
                <el-col :span="4">{{item.order_type||'无数据'}}</el-col>
              </el-row>
              <el-row>
                <el-col :span="4">订单时间</el-col>
                <el-col :span="4">{{item.order_time||'无数据'}}</el-col>
                <el-col :span="4">订单状态</el-col>
                <el-col :span="4">{{item.order_status||'无数据'}}</el-col>
                <el-col :span="4">商铺名称</el-col>
                <el-col :span="4">{{item.order_shop||'无数据'}}</el-col>
              </el-row>
              <el-row>
                <el-col :span="4">收货人</el-col>
                <el-col :span="4">{{item.receiver_name||'无数据'}}</el-col>
                <el-col :span="4">收货地址</el-col>
                <el-col :span="4">{{item.receiver_addr||'无数据'}}</el-col>
                <el-col :span="4">手机号码</el-col>
                <el-col :span="4">{{item.receiver_mobile||'无数据'}}</el-col>
              </el-row>
              <el-row>
                <el-col :span="4">固定电话</el-col>
                <el-col :span="4">{{item.receiver_telephone||'无数据'}}</el-col>
                <el-col :span="4">发票抬头</el-col>
                <el-col :span="4">{{item.receipt_title||'无数据'}}</el-col>
                <el-col :span="4">发票类型</el-col>
                <el-col :span="4">{{item.receipt_type||'无数据'}}</el-col>
              </el-row>
              <el-row>
                <el-col :span="4">发票内容</el-col>
                <el-col :span="4">{{item.receipt_content||'无数据'}}</el-col>
                <el-col :span="4">订单收货邮编</el-col>
                <el-col :span="4">{{item.receiver_zipCode||'无数据'}}</el-col>
                <el-col :span="4"></el-col>
                <el-col :span="4"></el-col>
              </el-row>
            </div>
            <div class="title">商品列表</div>
            <el-table :data="item.product_list">
              <el-table-column prop="product_name" label="商品名称" align="center"></el-table-column>
              <el-table-column prop="product_price" label="商品单价" align="center"></el-table-column>
              <el-table-column prop="product_amount" label="商品数量" align="center"></el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    data () {
      return {
        base_info: {},
        account_info: {},
        receiver_list: [],
        order_list: []
      }
    },
    computed: {
      text () {
        if (+this.$route.query.type === 1) return '京东信息'
        if (+this.$route.query.type === 2) return '淘宝信息'
        if (+this.$route.query.type === 3) return '苏宁信息'
      }
    },
    created () {
    }
  }
</script>

<style lang="less" ref="stylesheet/less" scoped>
  .table {
    text-align: center;

    .title {
      font-weight: bold;
      padding: 15px 0;
      border-bottom: 1px solid #eee;
      background-color: #2e78f2;
      color: #fff;
    }

    .el-row {
      display: flex;

      .el-col {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 15px 0;
        border-right: 1px solid #eee;
        border-bottom: 1px solid #eee;

        &:nth-child(2n+1) {
          color: #000;
          font-weight: 700;
        }

        &:last-child {
          border-right: none;
        }
      }
    }

    .el-tabs {
      .el-tab-pane {
        .el-row {
          .el-col {
            &:first-child {
              border-left: 1px solid #eee;
            }

            &:last-child {
              border-right: 1px solid #eee;
            }
          }

          &:first-child {
            .el-col {
              border-top: 1px solid #eee;
            }
          }
        }
      }
    }
  }
</style>
